////
/// Content
/// Flexbox
////

@import 'utils/shared/functions';
@import 'utils/shared/layout';

$flexbox-block-name: unquote('Block');

.Flexbox {
  @include draggable-source-layout($flexbox-block-name, 1, 2, 4, 5) {
    flex-basis: 50%;
  }

  @include draggable-source-layout($flexbox-block-name, 3, 6, 7) {
    flex-basis: 100%;
  }

  @include draggable-source-layout($flexbox-block-name, 1, 2, 4, 5, 7) {
    .BlockContent {
      height: rows(2);
    }
  }

  @include draggable-source-layout($flexbox-block-name, 3, 6) {
    .BlockContent {
      height: rows(3);
    }
  }

  @media screen and (min-width: get-breakpoint(tablet)) {
    @include draggable-source-layout($flexbox-block-name, 1, 2, 4, 5, 7) {
      .BlockContent {
        height: rows(3);
      }
    }

    @include draggable-source-layout($flexbox-block-name, 3, 6) {
      .BlockContent {
        height: rows(4);
      }
    }
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    @include draggable-source-layout($flexbox-block-name, 1, 2, 3) {
      flex-basis: 33.333%;
    }

    @include draggable-source-layout($flexbox-block-name, 4) {
      flex-basis: 25%;
    }

    @include draggable-source-layout($flexbox-block-name, 5) {
      flex-basis: 75%;
    }

    @include draggable-source-layout($flexbox-block-name, 6, 7) {
      flex-basis: 50%;
    }

    @include draggable-source-layout($flexbox-block-name, 1, 2, 3, 4, 6, 7) {
      .BlockContent {
        height: rows(4);
      }
    }

    @include draggable-source-layout($flexbox-block-name, 4, 5) {
      .BlockContent {
        height: rows(5);
      }
    }
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    @include draggable-source-layout($flexbox-block-name, 1, 2, 3, 4, 6, 7) {
      .BlockContent {
        height: rows(5);
      }
    }

    @include draggable-source-layout($flexbox-block-name, 4, 5) {
      .BlockContent {
        height: rows(6);
      }
    }
  }
}
